<template>
  <div class="intermediate-view">
    <div class="lvl-bg"></div>
    <div
      class="content"
      :class="isLayoutH && 'layout-h'"
      id="content"
      ref="content"
      :style="isLayoutH && { width: pageW + 'px' }"
    >
      <div
        v-for="(page, pIdx) in pages"
        :key="pIdx"
        :style="{
          top: page.y + 'px',
        }"
        :class="['group', 'L', { 'snd-page': page.isLast }]"
      >
        <template v-for="(step, idx) in page.steps">
          <div
            :key="idx"
            class="step-item"
            :style="{ left: step.x + 'px', top: step.y + 'px' }"
          >
            <div class="step-info passed" :class="{ passed: step.passed }">
              <!-- <span v-if="!step.passed">{{ step.data && step.data.name }}</span>
                <imgNum v-else :num="step.data && Number(step.data.name)"></imgNum> -->
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="thinking" @click="getRouterThink">
      <img class="image" src="../../../assets/btn-restart.png" alt="" />
      <span>说明</span>
    </div>
  </div>
</template>

<script>
import Touch from "../../../utils/touch.js";
import bgPositions from "./bgPositions";
export default {
  data() {
    return {
      pageW: 0,
      screenH: 0,
      isLayoutH: false,
      bgImgsH: 1762,
      pages: [
        {
          y: 0,
          steps: [],
        },
        {
          y: 0,
          steps: [], // 两屏的step信息，包括 name, passed, invalid等信息
        },
      ],
      currStepIdx: 216, // 当前关卡
      maxStep: 600, // 最大关卡
      scrollPosition: { x: 0, y: 0 },
      bgH: null,
      stepTapLock: false,
      stepPosition: null,
      partMaxY: 0,
      partMinY: 0,
    };
  },
  mounted() {
    this.stepPosition = JSON.parse(JSON.stringify(bgPositions.L)); //深拷贝这个数据

    let _sw = window.innerWidth;
    let _sh = window.innerHeight;
    if (_sw > _sh) {
      _sw = Math.ceil(_sh * 0.9);
      this.isLayoutH = true;
    }
    this.pageW = _sw;
    this.screenH = _sh;

    this.bgImgsH = this.getRatioVal(this.bgImgsH);
    this.bgH = this.bgImgsH;

    this.stepPosition.forEach((item) => {
      item.x = this.getRatioVal(item.x);
      item.y = this.getRatioVal(item.y);
    });

    this.pages[1].y = -1 * this.bgH;
    document.body.addEventListener("touchmove", this.touchmoveEvt, {
      passive: false,
    });
    this.getStepData();
  },
  methods: {
    getRatioVal(val) {
      // 保留一位小数点
      const ratio = this.pageW / 750;
      return Math.ceil(val * 10 * ratio) / 10;
    },
    touchmoveEvt(evt) {
      evt.preventDefault();
    },

    //放置棋子
    getStepData() {
      //   let currOffsetIdx = (this.currStepIdx + 1) % 10;
  
      this.$nextTick(() => {
        this.initAlloytouch();
      });
    },

    initAlloytouch() {
      // 计算初始关卡位置
      let stepIdx = this.currStepIdx;
      let pageMin = Math.floor(stepIdx / 10) * this.bgH * -1;

      let offsetPages = Math.ceil((this.maxStep - this.stepIdx) / 10);
      let pageMax = offsetPages * this.bgH + this.getRatioVal(100);

      // 计算当前关卡位置
      let offsetIdx = this.currStepIdx % 10;
      if (offsetIdx === 0) {
        offsetIdx = 10;
      }

      let stepY = this.stepPosition[offsetIdx - 1].y;
      let currPosition = this.screenH - stepY - this.screenH / 2;

      console.log("currPosition..1..", currPosition);
      if (currPosition < pageMin) {
        currPosition = pageMin;
      } else if (currPosition > pageMax) {
        currPosition = pageMax;
      }
      // 初始化位置
      this.scrollPosition.y = currPosition;

      //最大、小 定位位置
      this.partMaxY = currPosition;
      this.partMinY = pageMin;

      this.scrollTouch = new Touch({
        touch: "#content",
        target: this.scrollPosition,
        property: "y",
        factor: 1,
        moveFactor: 1,
        preventDefault: false,
        bindSelf: false,
        max: pageMax,
        min: pageMin,
        change: () => {
          this.updatePageRender();
        },
        touchMove: () => {
          this.stepTapLock = true;
        },
        touchEnd: () => {
          this.stepTapLock = false;
        },
      });
    },
    updatePageRender() {
      this.updatePagePositon();
    },
    updatePagePositon() {
      let p = this.scrollPosition.y;
      let h = this.bgH;
      let offset = p % h;
      let v = Math.floor(Math.abs(p) / h) % 2;
      this.pages.forEach((item, i) => {
        let m = 1;
        if (p < 0) {
          m = -1;
        }
        item.y = offset + (i + v - 1) * h * (-2 * v + 1) * m;
      });
      if (this.pages[0].y < this.pages[1].y) {
        this.pages[0].isLast = true;
        this.pages[1].isLast = false;
      } else if (this.pages[1].y < this.pages[0].y) {
        this.pages[0].isLast = false;
        this.pages[1].isLast = true;
      }
    },
    getRouterThink() {
      this.$router.push({
        name: "infiniteScroll",
        params: {
          type: "interText",
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.intermediate-view {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #1990fe;
  overflow: hidden;
  .lvl-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    filter: blur(20px);
    background-image: url("../../../assets/step-bg2.png");
  }
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
    &.layout-h {
      box-shadow: 2px -2px 4px 0px rgba(51, 51, 51, 0.2);
    }
  }

  .group {
    position: absolute;
    left: 0;
    width: 100%;
    background-size: 100%;
    &.L {
      height: 1762px;
      background-image: url("../../../assets/step-bg2.png");
    }
    &.snd-page {
      // 解决page间不吻合的问题（缝隙）
      // transform: translateY(3px);
    }
    .step-item {
      position: absolute;
      font-family: Arial;
      font-size: 38px;
      font-weight: bold;
      color: #6e6e6e;
      .step-info {
        width: 42px;
        height: 42px;
        background-size: 100%;
        padding-top: 14px;
        box-sizing: border-box;
        background-image: url("../../../assets/step-locked.png");
        &.passed {
          background-image: url("../../../assets/step-passed.png");
          &:active {
            transform: scale(1.1);
          }
        }
      }
      .step-award {
        img {
          width: 120px;
          transform: translate(-20%, -35%);
        }
      }
      .user-info {
        position: absolute;
        top: -110px;
        left: -12px;
        width: 105px;
        height: 114px;
        background-size: 100%;
        z-index: 99;
        background-image: url("../../../assets/user-icon.png");
        animation: userJump 2s infinite;
        img {
          margin-top: 6px;
          width: 86px;
          border-radius: 50%;
        }
      }
    }
  }
  .thinking {
    position: absolute;
    top: 30px;
    right: 20px;
    width: 35px;
    height: 35px;
    text-align: center;
    .image {
      width: 100%;
      height: 100%;
      vertical-align: bottom;
    }
    span {
      font-size: 12px;
      color: #fff;
    }
  }
}
</style>